@import "@style/index";

.character {
  background-color: @theme-background;
  width: 100%;
  height: 1000px;
  min-height: 100%;

  &-background {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;

    &-img {
      height: 100%;
      width: 100%;
    }

    &-mask {
      opacity: 0.84;
      background-color: @theme-background;
    }
  }

  &-header {
    position: relative;

    &-background {
      height: 100%;
      width: 94%;
      margin-left: 3%;
      border-radius: 72px;
      border-bottom-width: 2px;
    }
  }

  &-title {
    position: relative;
    margin-bottom: 16px;

    &-text {
      .font-white-title();
      font-size: 56px;
      font-weight: bold;
    }
  }

  &-content {
    position: relative;
    padding: 26px 48px;
    padding-bottom: 16px;

    &-box {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    &-row {
      margin-top: 6px;
      width: 50%;

      &-text {
        .font-white-title();
        font-size: 34px;

        &_a {
          font-size: 32px;
          color: @color-blue;
        }
      }

      &_two {
        width: 100%;
      }
    }
  }

  &-episodes {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 32px;
    padding-bottom: 224px;
  }
}
